<template>
	<div class="menu_product">
		<div class="m_pro_item" v-for="(item,index) in productData" :key="index" @click="$router.push({name: 'Detail',
		params: {pid: item.pid}})">
			<div class="pro_img">
				<img v-lazy="item.smallImg" :alt="item.name">
			</div>
			<div class="pro_text">
				<div class="pro_name Text_abb">{{item.name}}</div>
				<div class="pro_enname Text_abb">{{item.enname}}</div>
			</div>
			<div class="price">￥{{item.price}}</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/utils/eventBus.js'
	import { getPro2Type } from '@/api/menu.js'
	export default {
		name: 'Menu-product',
		created() {
			this._getPro2Tyoe()
			// topbar 组件点击label通知
			bus.$on('labelClick', (type) => {
				if (type === 'isHot') {
					this._getPro2Tyoe()
				} else {
					let params = {
						key: 'type',
						value: type
					}
					this._getPro2Tyoe(params)
				}
			})
		},
		data () {
			return {
				productData: []
			}
		},
		methods: {
			_getPro2Tyoe(params = {key: 'isHot',value: 1}) {
				this.$toast.loading({
					message: '加载中···',
					 forbidClick: true
				})
				getPro2Type(params)
				.then(({data: res}) => {
					console.log('_getPro2Tyoe',res)
					if (res.code !== 500) return this.$toast.fail('请求异常,请重新尝试!')
					this.productData = res.result
					this.$toast.clear()
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
					this.$toast.clear()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu_product{
		.m_pro_item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 8px;
			border-radius: 5px;
			margin: 10px;
			.pro_img{
				width: 75px;
				img {
					width: 100%;
					border-radius: 5px;
				}
			}
			.pro_text{
				width: 190px;
				color: lightslategrey;
				.pro_name{
					font-size: 16px;
					margin: 5px 10px;
				}
				.pro_enname{
					font-size: 12px;
					margin: 10px 10px;
				}
			}
			.price{
				margin-right: 15px;
				color: #0b34b8;
				font-weight: bolder;
				font-size: 16px;
			}
		}
	}
</style>